<script setup lang="ts">
import { reactive, ref, onMounted } from 'vue'
import { HttpCodeEnum } from '@packages/share/enums'
import { getRISKInfoAPI } from '@/api/search/index'
import { assignObject } from '@/utils/object'

import { Warning } from '@element-plus/icons-vue'

const props = defineProps({
  id: { type: String, required: true }
})
const infoData = reactive({
  micAss: '',
  riskField: []
})
const getInfo = (id: string) => {
  getRISKInfoAPI(id).then((res) => {
    let { code, data } = res.data
    if (code === HttpCodeEnum.SUCCESS) {
      assignObject(infoData, data)
    }
  })
}
onMounted(() => {
  getInfo(props.id)
})
</script>
<template>
  <div class="title flex-center">
    <span>风险评估</span>
    <jm-icon class="icons">
      <Warning />
    </jm-icon>
  </div>
  <div class="risk" v-if="infoData.riskField?.length>0">
    <div class="title">
      <jm-tag type="warning">{{ infoData.micAss }}</jm-tag>
    </div>
    <div class="risk-container" v-for="(Item, Index) in infoData.riskField" :key="Index">
      <div class="item">
        <div class="header">{{ Item.name }}</div>
        <div class="tags">
          <jm-tag v-for="(item, index) in Item.rickFieldAll" :key="index"
            :type="item.charAt(0) === Item.options ? 'primary' : 'info'" class="tag">
            {{ item }}
          </jm-tag>
        </div>
      </div>
    </div>
  </div>
  <div v-else>
    <jm-empty description="空" />
  </div>
</template>
<style scoped lang="scss">
.flex-center {
  display: flex;
  align-items: center;
}

.icons {
  margin-left: 0.625rem;
}

.risk {
  padding: 0.625rem;
  background-color: var(--el-color-info-light-9);

  .title {
    font-weight: 700;
    margin-bottom: 1.25rem;
  }

  .risk-container {
    display: flex;

    .item {
      margin-bottom: 1.25rem;

      .header {
        margin-bottom: 0.625rem;
      }

      .tag {
        margin-right: 0.625rem;
      }
    }

  }
}
</style>
